<template>
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h2 class="sub-header">信息列表</h2>
    <router-link class="btn btn-success" to="/newstudent">添加信息</router-link>
    <button class="btn btn-danger" @click="deleteStudentHistorys" v-show="showCheckBox">删除选中</button>
    <button class="btn btn-danger" @click="showCheck">{{ deleteText }}</button>
    <div class="table-responsive">
      <table class="table table-striped">
        <thead>
          <tr>
            <th v-if="showCheckBox">
              <input type="checkbox" name="checkAll" v-model="checkAll" @change="changeChecked" id />
            </th>
            <th>#</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>爱好</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="student in studentHistorys" :key="student.id">
            <td v-if="showCheckBox">
              <input
                :value="student.id"
                type="checkbox"
                :name="student.id"
                v-model="checkModel"
                :id="student.id"
              />
            </td>
            <td>{{ student.id }}</td>
            <td>{{ student.name }}</td>
            <td>{{ student.gender == 0 ? '男':'女' }}</td>
            <td>{{ student.age}}</td>
            <td>{{ student.hobbies }}</td>
            <td>{{ student.time | dateFormat }}</td>
            <td>
              <button
                class="btn btn-success btn-sm"
                @click="reduction(student.id,student)"
              >还原</button>
              <button class="btn btn-danger btn-sm" @click="deleteStudentHistory(student.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { Indicator,Toast } from "mint-ui";
import { InfiniteScroll } from "mint-ui";
import {
  deleteHistoryData,
  addStudentData,
  getStudentsHistory,
  getHistoryData
} from "@/apis/data";
export default {
  data() {
    return {
      checkAll: false,
      checkModel: [],
      showCheckBox: false,
      deleteText: "批量删除",
      studentHistorys: []
    };
  },
  methods: {
    deleteStudentHistory(studentID) {
      Indicator.open();
      deleteHistoryData(studentID)
        .then(response => {
          this.getStudentsHistory();
          Indicator.close();
        })
        .catch(function() {
          console.log("服务器异常！");
        });
    },
    reduction(index, student) {
      Indicator.open()
      addStudentData(student).then(response => {
        var id = parseInt(index);
        deleteHistoryData(id).then(response => {
          Indicator.close()
        });
      });
    },
    deleteStudentHistorys() {
      if (this.checkModel.length == 0) {
        Toast({
          message: "请选择要删除的信息",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-remove"
        });
        return;
      }
      var id = this.checkModel;
      deleteHistoryData(id).then(response => {
        this.getStudentsHistory();
        Toast({
          message: "选中的信息删除成功",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-ok"
        });
      });
    },
    showCheck() {
      this.showCheckBox = !this.showCheckBox;
      if (this.showCheckBox == true) this.deleteText = "取消";
      else this.deleteText = "批量删除";
    },
    changeChecked() {
      if (this.checkAll == true) {
        this.studentHistorys.forEach((value, index) => {
          this.checkModel.push(value.id);
        });
      }
    },
    getStudentsHistory() {
      getHistoryData().then(res => {
        this.studentHistorys = res.data;
      });
    }
  },
  watch: {
    checkModel: function(newVal, oldVal) {
      if (this.checkModel.length == this.studentHistorys.length)
        this.checkAll = true;
      else this.checkAll = false;
    },
    $route(route) {
      if (route.name === "studenthistory") {
        this.getStudentsHistory();
      }
    }
  },
  created() {
    this.getStudentsHistory();
  }
};
</script>
<style>
</style>
